<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="author" content="金西振">
    <title></title>
    <style>
      li{
        background-color: lightblue;
        margin: 10px;
      }
      a{
        background-color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li data-index="0"><a href="">选项1</a></li>
      <li data-index="1"><a href="">选项2</a></li>
      <li data-index="2"><a href="">选项3</a></li>
      <li data-index="3"><a href="">选项4</a></li>
      <li data-index="4"><a href="">选项5</a></li>
      <li data-index="5"><a href="">选项6</a></li>
    </ul>
    <script>
      // 点击不同的选项，得到不同的索引值：0 1 2
      // 方式一：使用data-属性向JS传值，传递的值就是索引值 
      var lis = document.querySelectorAll('li');
      for(var i = 0; i < lis.length; i++){
        var li = lis[i];
        li.onclick = function(){
          console.log(this.dataset.index);
        }
      }
    
    </script>
  </body>
</html>